<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>钱包充值</title>
    <link rel="stylesheet" href="${ctx}/static/plug/frozenui-1.3.0/css/frozen.css" media="all">
    <style type="text/css">
        .content {
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 20px
        }

        .recharge-content {
            width: 45%;
            margin-top: 10px;
            padding-bottom: 20px;
            padding-top: 5px;
            background-color: #469fe3;
            color: white;
            border-radius: 5px;
            border: 1px solid #469fe3
        }

        .unselected-content {
            width: 45%;
            margin-top: 10px;
            padding-bottom: 20px;
            padding-top: 5px;
            background-color: #f8f8f8;
            color: #25282e;
            border-radius: 5px;
            border: 1px solid #25282e
        }

        .div-ul-li-div-div {
            padding-top: 20px;
            padding-left: 0px;
            font-size: 12px;
            text-align: center;
        }

        .title {
            font-size: 12px;
            color: #a2a2a3;
            text-align: center;
        }
    </style>
</head>
<body>
<header class="ui-header ui-header-stable content">
    <p>充值金额</p>
</header>
<section class="ui-container" style="padding-left: 15px">
    <div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start">
        <div class="ui-flex ui-flex-pack-start">
            <div class="ui-grid-halve-img  recharge-content" data-id="100">
                <div class="div-ul-li-div-div">
                    充值<span style="font-size: 22px" class="span-money">100</span>赠<span style="font-size: 19px">5</span>元券
                    <span></span>
                </div>
            </div>
            <div class="ui-grid-halve-img  unselected-content" data-id="200" style="margin-left: 15px">
                <div class="div-ul-li-div-div">
                    充值<span style="font-size: 22px" class="span-money">200</span>赠<span
                        style="font-size: 19px">20</span>元券 <span></span>
                </div>
            </div>
        </div>
        <div class="ui-flex ui-flex-pack-start" style="margin-top: 5px">
            <div class="ui-grid-halve-img  unselected-content" data-id="500">
                <div class="div-ul-li-div-div">
                    充值<span style="font-size: 22px" class="span-money">500</span>赠<span
                        style="font-size: 19px">100</span>元券 <span></span>
                </div>
            </div>
        </div>

        <div class="ui-notice-btn" style="margin-left: 0px; padding-left: 0px">
            <p class="title" style="text-align: left;">赠券使用提示：</p>
            <p class="title" style="text-align: left;">每消费余额￥10即可使用2元赠券（8折优惠）</p>
            <button class="ui-btn-lg  ui-btn-primary" id="btnCz">去充值</button>
        </div>
    </div>
</section>
</body>
<script src="${ctx}/static/plug/frozenui-1.3.0/lib/zepto.min.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/js/frozen.js"></script>
<script src="${ctx}/static/js/jweixin-1.2.0.js"></script>
<script>
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: "${signature.appId}", // 必填，公众号的唯一标识
        timestamp: "${signature.timestamp}", // 必填，生成签名的时间戳
        nonceStr: "${signature.nonceStr}", // 必填，生成签名的随机串
        signature: "${signature.signature}",// 必填，签名，见附录1
        jsApiList: [ 'chooseWXPay']
        // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });

    var paramObj = {
        "unifiedorderParams": "${unifiedorderParams}",
        "myMoneyParams": "${myMoneyParams}"
    };

    $(function () {
        wx.ready(function () {
            var canSubmit = true;
            $("#btnCz").click(function () {
                var money = $(".recharge-content").find(".span-money").html();
                var paraObj = {
                    "totalFee": money * 100,
                    "appId": "${signature.appId}",
                    "params": paramObj.unifiedorderParams
                };
                if (canSubmit) {
                    canSubmit = false;
                    $.post("${action}", paraObj, function (obj) {
                        console.log(obj);
                        canSubmit = true;
                        if (obj.result) {
                            var wxPayParams = JSON.parse(obj.data);
                            console.log(wxPayParams);
                            wx.chooseWXPay({
                                timestamp: wxPayParams.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                nonceStr: wxPayParams.nonceStr, // 支付签名随机串，不长于 32 位
                                package: wxPayParams.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                                signType: wxPayParams.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                paySign: wxPayParams.paySign, // 支付签名
                                success: function (res) {
                                    console.log("pay success");
                                    showTips("warn", "充值成功！");
                                    window.location.href = "${action}?params=" + paramObj.myMoneyParams;
                                }
                            });
                        } else {
                            showTips("warn", obj.msg);
                            //location.reload(true);
                        }
                    });
                }


//				wx.scanQRCode({
//					needResult : 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
//					success : function(res) {
//						var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
//					}
//				});

                // 				var money = $(".recharge-content").attr("data-id");
                // 				if (canSubmit) {
                // 					canSubmit = false;
                // 					showTips("info", "充值" + money + "元");
                // 					canSubmit = true;
                // 				}
            });
        });

        $(".ui-grid-halve-img").click(function () {
            if ($(this).hasClass("recharge-content")) {
                return;
            }
            $(".ui-grid-halve-img").removeClass("recharge-content");
            $(".ui-grid-halve-img").addClass("unselected-content");
            $(this).removeClass("unselected-content");
            $(this).addClass("recharge-content");
        });
    });


</script>
</html>
